<template>
    <div class="alarmPush-container">
        <div class="left-menu-box" >
            <baseDrawer :title="$t('equipmentType')" @changeShow='changeShow' >
                <div class="selectItem" v-for="(item,index) in deviceTypeData" :id="item.value" :key="index" :class="activeClass ==index?'active':''">
                    <span @click="changeDeviceType(item.value,index)">{{item.code}}</span>
                </div>
            </baseDrawer>
        </div>
        <div class="right-menu-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <el-card class="box-card" v-for="(item,key) in alarmList" :key="key">
                <div slot="header" class="clearfix">
                    <span>{{UtilsFun.getValueByCode(alarmLevelData,key)}}</span>
                </div>
                <div class="text item" v-for="item2 in item" :key="item2.code">
                    <el-checkbox v-model="item2.enableFlag" :true-label="1" :false-label="0">{{item2.alarmName}}</el-checkbox>
                </div>
            </el-card>
            <el-button type="primary" @click="save" class="pull-right">{{$t('save')}}</el-button>
        </div>
    </div>
</template>

<script>
import baseDrawer from '../../../components/common/baseDrawer'
export default {
    components: {
        baseDrawer
    },
    props: {

    },
    data() {
        return {
            deviceType:'',
            alarmList:[],
            activeClass:0,
            changeShowFlag:true,
            deviceTypeData:[],
            alarmLevelData:[]
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        
    },
    methods: {
        changeShow(flag){
            this.changeShowFlag = flag
        },
        changeDeviceType(val,index){
            this.deviceType=val
            this.activeClass=index
            this.getAlarmList()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ALARM_LEVEL,INVERTER_TYPES,ALARM_TYPES',
                lang:localStorage.getItem('lang')
            })
            this.alarmLevelData = res.ALARM_LEVEL
            this.deviceTypeData = res.INVERTER_TYPES
            this.deviceType=this.deviceTypeData[0].value
            this.getAlarmList();
        },
        async getAlarmList(){
            let res = await this.API.getAlarmList({
                deviceType:this.deviceType
            })
            this.alarmList=res
        },
        async save(){
            let ids='';
            let sel_ids='';//所有被选中项
            let unsel_ids='';//有被选中项
            for(let key in this.alarmList){
                this.alarmList[key].forEach((item)=>{
                    if(item.enableFlag==1){
                        sel_ids+=item.ids+','
                    }else{
                        unsel_ids+=item.ids+','
                    }
                })
            }
            ids='0#'+unsel_ids+';1#'+sel_ids;
            console.log(ids)
            let data = await this.API.setAlarmData({
                ids:ids,
                deviceType:this.deviceType
            })
            if(data=='0'){
                this.$message.success(this.$t('index.control_success'))
			}else{
                this.$message.error(this.$t('index.control_fail'))
			}
        }
    },
};
</script>

<style lang="less">
.alarmPush-container{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    font-size: 14px;
    .right-menu-box{
        flex: 1;
    }
    .selectItem{
        span{
            display:block;
            padding: 5px;
            font-size: 13px;
        }
        &:hover,&.active{
            background:#FEA429;
            cursor: pointer;
        }
    }
    .el-card{
        margin-bottom: 10px;
    }
    .el-card__header{
        padding: 8px;
    }
    .text.item{
        padding: 3px 0;
        width: 300px;
        display: inline-block;
    }
}

</style>
